<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<router-link to="/homepage" style="
							width: 100%;
							font-size: 18px;
							border: none;
							border-bottom: 1px solid white;
							margin-top: 20px;
							outline: none;
						">回到主页</router-link>
				<input 
					v-model="retData.workName"
					type="text"
					placeholder="在此输入标题文字"
					style="
						width: 100%;
						font-size: 18px;
						border: none;
						border-bottom: 1px solid white;
						margin-top: 20px;
						outline: none;
					"
				/>
			</el-header>
			<el-container>
				<el-container>
					<el-main>
						<el-upload
							v-model:file-list="fileList"
							action="http://121.41.171.56:2003/work/uploadPic"
							list-type="picture-card"
							:on-preview="handlePictureCardPreview"
							:on-remove="handleRemove"
							:on-success="getData"
							:before-upload="beforeUpload"
						>
							<el-icon><Plus /></el-icon>
						</el-upload>

						<el-dialog v-model="dialogVisible">
							<img w-full :src="dialogImageUrl" alt="Preview Image" />
						</el-dialog>

					</el-main>
					<el-footer>
						<textarea
							v-model="retData.describe"
							placeholder="在此输入文字描述"
							style="
								width: 100%;
								height: 200px;
								font-size: 18px;
								border: none;
								border-bottom: 1px solid white;
								margin-top: 20px;
								outline: none;
							"
						></textarea>
					</el-footer>
					<el-footer>
						<div class="button-container">
							<button
								type="submit"
								style="background-color: #7fffd4"
							>
								草稿
							</button>
							<button
								@click="sendDataToBackend"
								type="submit"
								style="background-color: #8ee5ee"
							>
								发布
							</button>
						</div>
					</el-footer>
				</el-container>
			</el-container>
		</el-container>
	</div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
import type { UploadProps, UploadUserFile } from 'element-plus'

import type { UploadFile } from "element-plus";
import Redo from "wangeditor/dist/menus/redo";
import axios from "axios";
import {useUserInfoStore} from "../stores/userInfo"
import router from "../router";
const userInfoStore=useUserInfoStore()

const fileList = ref<UploadUserFile[]>([
	
])

const retData = ref({
	workName:'',
	coverLink:'',
	pictureIds:'',
	describe:''
})

const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.size / 1024 / 1024 > 10) {
    alert('Picture size can not exceed 10MB!')
    return false
  }
  return true
}

const handleRemove = (response,file: UploadFile) => {
	console.log(response.data.picId);
};

const handlePictureCardPreview = (file: UploadFile) => {
	dialogImageUrl.value = file.url!;
	dialogVisible.value = true;
};

const handleDownload = (file: UploadFile) => {
	console.log(file);
};

const getData = (response, file: UploadFile, fileList:UploadUserFile[]) => {
	var picid = file.response.data.picId
	retData.value.pictureIds+=picid
	retData.value.pictureIds+=','
	retData.value.coverLink=file.response.data.picLink

}

const config = {  
  headers: {  
    'Content-Type': 'application/json',
	'token':''
  }  
}; 

// 创建一个方法用于发送数据到后端  
const sendDataToBackend = async () => {  
      try {  
        // 将ref对象转换为普通对象  
        const dataToSend = {  
          workName: retData.value.workName,  
          coverLink: retData.value.coverLink,  
          pictureIds: retData.value.pictureIds,  
          describe: retData.value.describe  
        };  
  
        // 将对象转换为JSON字符串  
        const jsonData = JSON.stringify(dataToSend); 

		//config.headers.token=useUserInfoStore.token()
		const tempToken = localStorage.getItem("vue_admin_template_token")
		if(tempToken!=null) {
			config.headers.token = tempToken
		}
  
        // 发送POST请求到后端API  
        const response = await axios.post('http://121.41.171.56:2003/work/uploadWork', jsonData,config);  

      } catch (error) {  
        // 处理请求错误  
        console.error('Error sending data:', error);  
      }  
	  router.push({name:"homepage"})
    };

</script>

<style>
.text-avatar {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 20px;
	opacity: 0.5;
}
.button-container {
	display: flex;
	justify-content: center;
	margin-top: 10%;
}

.button-container button {
	width: 90px;
	height: 40px;
	margin-right: 10px;
	padding: 5px 10px;
	border-radius: 25px;
	color: white;
	border: none;
	cursor: pointer;
}

</style>
